<!-- <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> -->
<html>

<head>

    <title>Document</title>
    <link rel="stylesheet" href="../css/employee.css">
</head>

<body>
    <div id="app">
        <header>
            <h2 style="line-height: 80px; margin-left: 50px;">员工管理</h2>
        </header>
        <main>
            <div class="main-center">
                <div class="submit">
                    <input type="button" value="+新增员工" id="add" @click="add">
                    <input type="button" value="-删除员工" id="del">
                </div>
                <div class="table">
                    <table width="90%">
                        <tr style="border: 2px solid rgb(243, 244, 249);">
                            <td>员工姓名</td>
                            <td>账号</td>
                            <td>手机号</td>
                            <td>账号状态</td>
                            <td>操作</td>
                        </tr>
                        <tr v-for="(item, i) in employees" style="border: 2px solid rgb(243, 244, 249);">
                            <td>{{item.name}}</td>
                            <td>{{item.username}}</td>
                            <td>{{item.phone}}</td>
                            <td>{{item.status}}</td>
                            <td>
                                <input type="button" value="修改" @click="updateemployee(i)">
                                <input type="button" value="删除" @click="del(i)">
                            </td>
                        </tr>
                        <!-- <c:forEach var="employee" items="${employees}">
                        <tr style="border: 2px solid rgb(243, 244, 249);">
                            <td>${employee.name}</td>
                            <td>${employee.username}</td>
                            <td>${employee.phone}</td>
                            <td>${employee.status}</td>
                            <td>
                                <a href="../employee/selectById?id=${employee.id}" id="update">修改</a>
                                <a href="../employee/delete?id=${employee.id}">删除</a>
                            </td>
                        </tr>
                    </c:forEach> -->
                    </table>
                </div>

            </div>
            <div class="page-info">
                <span>共{{pageTool.pageTotal}}条</span>
                <select class="page" name="page" id="page" @click="selectAll" v-model="pageTool.pageSize" >
                    <option value="5" >5条/每页</option>
                    <option value="10" >10条/每页</option>
                </select>
                <input type="button" value="-" width="30px" @click="reduce">
                <span>第{{pageTool.pageNo}}页</span>
                <input type="button" value="+" width="30px" @click = "plus">
                <input type="text" style="outline: none; border: 1px solid rgb(229, 228, 228); width: 50px; height: 20px;">
            </div>
        </main>
        
        <div id="masking" :style="{display:(masking?'block':'none')}">
            <div class="operation">
                <div class="operation-header">
                    <h2 style="padding: 20px;" id="test">{{test}}</h2>
                </div>
                <div class="operation-main">
                    <form action="" method="post" target="a" @submit="onsubmit" id="myform">
                        <input type="text" name="id" value="onemployee.id" style="display: none;" id="employeeId">
                        <label for="">姓名</label>
                        <input type="text" name="name" v-model="onemployee.name"><br>
                        <label for="">用户名</label>
                        <input type="text" name="username" v-model="onemployee.username"><br>
                        <label for="">密码</label>
                        <input type="text" name="password" v-model="onemployee.password"><br>
                        <label for="">手机号</label>
                        <input type="text" name="phone" v-model="onemployee.phone"><br>
                        <label for="">性别</label>
                        <input type="text" name="sex" v-model="onemployee.sex"><br>
                        <label for="">身份证号</label>
                        <input type="text" name="idNumber" v-model="onemployee.idNumber"><br>
                        <label for="">状态</label>
                        <input type="text" name="status" v-model="onemployee.status"><br>
                        <input type="submit">
                        <input type="button" id="cancel" value="取消" @click="cancel()">
                    </form>
                </div>
            </div>
        </div>

    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            employees:[],
            onemployee:{},
            masking:false,
            test:"修改员工",
            uri:"",
            pageTool:{
                pageTotal:"",
                pageSize:"5",
                pageNo:1
            },
        },
        methods: {
            //页数加

            plus(){
                if (this.pageTool.pageNo>1)
              this.pageTool.pageNo ++;
              this.selectAll();
            },
            reduce(){
                if(this.pageTool.pageNo>1){
                    this.pageTool.pageNo --;
                    this.selectAll();
                }

            },
            selectCount(){
                that = this;
                axios.get('http://localhost:8080/LS02_Impl/employee/selectCount').then(res=>{
                    that.pageTool.pageTotal =  res.data;
                }).catch(err=>{
                    console.log(err);
                })
            },

            add(){
                this.uri = "addEmployee";
                this.onemployee = {};
                this.test = "新增员工";
                this.show();
            },

            show(){
              this.masking = !this.masking;
            },

            del(i){
                that = this;
                this.uri = "delete"
                axios.post('http://localhost:8080/LS02_Impl/employee/' + this.uri,this.employees[i].id)
                    .then(res => {
                        if (res.data == 1){
                            that.selectAll();
                        }
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

            selectAll(){
                this.uri = "selectAll"

                that = this;
                this.selectCount();
                axios.post('http://localhost:8080/LS02_Impl/employee/' + this.uri,this.pageTool)
                    .then(res => {
                        console.log("ALL");
                        console.log(res.data);
                        that.employees = res.data;
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },

            onsubmit(e){
                that = this;
                e.preventDefault();
                if(this.onemployee != null){
                    axios.post('http://localhost:8080/LS02_Impl/employee/'+ this.uri,this.onemployee)
                    .then(res => {
                        if (res.data == 1){
                            that.masking = false;
                            that.selectAll();
                        }
                    })
                    .catch(err => {
                        console.error(err); 
                    })
                }
            },

            cancel(){
                this.masking = false;
              // console.log(this.masking);
            },

            updateemployee(i) {
                this.uri = "updateById";
                this.test = "修改员工";
                // console.log(i);
                this.onemployee=JSON.parse(JSON.stringify(this.employees[i]));
                this.masking = true;
                return;
                // console.log(this.employee);
            }
        },
        mounted () {
           this.selectAll();
        },
    })
</script>

</html>